---
type: tutorial
title: 재사용 가능한 탐색 컴포넌트 만들기
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 여러 페이지에서 반복되는 요소를 재사용 가능한 컴포넌트로 교체
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 Astro 사이트의 여러 페이지에 동일한 HTML이 작성되었으므로 중복된 콘텐츠를 재사용 가능한 Astro 컴포넌트로 교체할 때입니다!

<PreCheck>
  - 컴포넌트에 대한 새 폴더 만들기
  - 탐색 링크를 표시하는 Astro 컴포넌트 구축
  - 기존 HTML을 재사용 가능한 새로운 탐색 컴포넌트로 교체
</PreCheck>

## 새로운 `src/components/` 폴더 생성

HTML을 생성하지만 웹 사이트의 새 페이지가 되지 않는 `.astro` 파일을 보관하려면 프로젝트에 `src/components/`라는 새 폴더가 필요합니다.

## 탐색 컴포넌트 만들기

<Steps>
1. `src/components/Navigation.astro`라는 새 파일을 만듭니다.

2. 모든 페이지의 상단에서 페이지를 탐색하기 위해 링크를 복사하여 새로운 파일인 `Navigation.astro`에 붙여넣습니다.

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    ```
    :::tip
    `.astro` 파일의 프런트매터에 아무것도 없으면 코드 펜스를 작성할 필요가 없습니다. 필요할 때 언제든지 다시 추가할 수 있습니다.
    :::
</Steps>

### Navigation.astro 가져오기 및 사용

<Steps>
1. `index.astro`로 돌아가서 코드 펜스 내부에 새 컴포넌트를 가져옵니다.

    ```astro title="src/pages/index.astro"
    ---
    import Navigation from '../components/Navigation.astro';
    ---
    ```

2. 그런 다음 아래에서 기존 탐색 HTML 링크 요소를 방금 가져온 새 탐색 컴포넌트로 바꿉니다.

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <Navigation />
    ```

3. 브라우저에서 미리보기를 확인하고 정확히 동일하게 보이는지 확인하세요. 그게 바로 여러분이 원하는 것입니다!
</Steps>

여러분의 사이트에는 이전과 동일한 HTML이 포함되어 있습니다. 하지만 이제 이 세 줄의 코드는 `<Navigation />` 컴포넌트에서 제공됩니다.

<Box icon="puzzle-piece">

## 직접 시도해 보기 - 사이트의 나머지 부분에 탐색 기능을 추가하세요

동일한 방법을 사용하여 사이트의 다른 두 페이지 (`about.astro` 및 `blog.astro`)에서 `<Navigation />` 컴포넌트를 가져와 사용합니다.

잊지 마세요
- 코드 펜스 내부의 컴포넌트 스크립트 상단에 import 문을 추가합니다.
- 기존 코드를 탐색 컴포넌트로 바꿉니다.

</Box>

:::note
코드를 재구성하지만 페이지가 브라우저에 표시되는 방식이 변경되지 않는 것을 **리팩터링**이라고 합니다. 페이지 HTML의 일부를 컴포넌트로 대체하며 이 단계에서 여러 번 **리팩터링**하게 됩니다.

이를 통해 프로젝트 전체에 걸쳐 종종 중복되는 작업 코드를 신속하게 시작할 수 있습니다. 그런 다음 사이트의 외관을 변경하지 않고도 기존 코드의 디자인을 점진적으로 개선할 수 있습니다.
:::

<Box icon="question-mark">

### 지식을 테스트해보세요

1. 여러 페이지에 반복되는 요소가 있는 경우 이 작업을 수행할 수 있습니다.

    <MultipleChoice>
      <Option>
        개발 서버 다시 시작
      </Option>
      <Option isCorrect>
       재사용 가능한 컴포넌트를 사용하도록 리팩터링
      </Option>
      <Option>
       새 페이지 생성
      </Option>
    </MultipleChoice>

2. Astro 컴포넌트는

    <MultipleChoice>
      <Option>
        재사용 가능
      </Option>
      <Option>
        HTML 조각
      </Option>
      <Option isCorrect>
        위 항목 둘 다!
      </Option>
    </MultipleChoice>

3. Astro 컴포넌트는 다음과 같은 경우 사이트에 자동으로 새 페이지를 생성합니다.

    <MultipleChoice>
      <Option>
        `<html></html>` 포함
      </Option>
      <Option>
        리팩터링
      </Option>
      <Option isCorrect>
        `src/pages/` 안에 `.astro` 파일 존재
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] 콘텐츠를 재사용 가능한 컴포넌트로 리팩터링할 수 있습니다.
- [ ] `.astro` 페이지에 새 컴포넌트를 추가할 수 있습니다.
</Checklist>

</Box>

### 참고 자료 

- [Astro 컴포넌트 개요](/ko/basics/astro-components/)

- [리팩터링](https://refactoring.com/) <Badge>외부 링크</Badge>
